<template>
  <div>
    <FontHeader style="background: #192332; position: relative"></FontHeader>
    <div class="detailFirst"
      :style="{ backgroundImage: 'url(http://43.138.158.143/poster_background/' + this.movieId + '.jpg)' }"
      style="width: 1263px">
      <div id="movieBackground" class="movieDetailOut">
        <div class="movieDetail">
          <div class="movieDetailPhoto">
            <a>
              <img :src="'http://43.138.158.143/posters/' + movieId + '.jpg'" style="border-radius: 5px;height: 350px">
            </a>
          </div>
          <div class="movieDetailInfo">
            <div class="movieDetailFirst">
              <div class="movieDetailName">
                <h2>{{ this.movie.movieName }}</h2>
              </div>
              <div class="movieDetailName" style="margin-right: 20px">
                <h2>({{ this.movie.movieReleasedYear }})</h2>
              </div>
              <div class="movieDetailRating">
                <h2>{{ this.movie.movieAvgRating }}</h2>
              </div>
            </div>
            <div class="movieDetailGenres">
              <h3 style="margin-top: 6px;margin-bottom: 5px">
                <span v-for="genre in splitGenres()">
                  <el-tag style="margin-left: 2px;cursor: pointer" @click="searchGenre(genre)">{{ genre }}</el-tag>
                </span>
              </h3>
            </div>
            <div class="movieCollect">
              <h2 style="display: inline-block;margin-right: 5px;margin-top: 5px;margin-bottom: 5px">收藏</h2>
              <img v-show="!isCollection" @click="onCollection" src="http://43.138.158.143/inner/images/uncollect.png"
                style="height: 20px;margin-top: 10px">
              <img v-show="isCollection" @click="onCollection" src="http://43.138.158.143/inner/images/collect.png"
                style="height: 20px;margin-top: 10px">
            </div>
            <div class="movieRating" style="display: inline-block">
              <div style="display: inline-block" data-step="2" data-intro="对电影评分后，首页推荐内容会变更" @click="newUserIntro">
                <h2 style="margin-right: 4px;margin-top: 12px;margin-bottom: 5px">评分</h2>
              </div>
              <el-rate style="display: inline-block;vertical-align: middle;margin-bottom: 5px" v-model="movieRating"
                show-score allow-half text-color="#ff9900" score-template="{value}" @change="rating">
              </el-rate>
            </div>
            <div class="movieDetailPlot">
              <h3>剧情简介</h3>
              <p>{{ this.movie.movieSummary }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="movieCasts">
      <h3>演员</h3>
      <ol>
        <li class="actorlist" v-for="(actor, ids) in actors" v-if="ids < 6" :key="actor.actorId">
          <a>
            <img class="actorPoster" :src="'http://43.138.158.143/cast_poster/' + actor.actorId + '.jpg'"
              :alt="actor.actorName">
          </a>
          <p>{{ actor.actorName }}</p>
        </li>
      </ol>
    </div>
    <div class="review">
      <ComTest :movieId=this.$route.query.movieId></ComTest>
    </div>
    <div class="todayhot" style="margin-top: 100px;">
      <div class="mask"></div>
      <div class="container">
        <div class="hotnews" style="display: block">
          <h4 class="customtitle">相似电影</h4>
          <span id="showTodayRecmd" class="showTodayRecmd" style="display:block;">{{ this.similarSize }}</span>
          <ul class="newslist">
            <li class="newsitem" v-for="item in movies" :key="item.movieId">
              <div class="cinameimgout showMovieBrief">
                <router-link :to="{ path: '/detail', query: { movieId: item.movieId } }">
                  <a href="#" target="_blank" :title="item.movieName" class="cinameimgitem">
                    <img :src="'http://43.138.158.143/posters/' + item.movieId + '.jpg'" :alt="item.movieName">
                    <!--                    <em class="icohot">HOT</em>-->
                    <i class="moviegrade" style="color: white">{{ item.rating }}</i>
                  </a>
                </router-link>
              </div>
              <div class="movieName">
                <h3>
                  <a>{{ item.movieName }}</a>
                </h3>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!--    <router-view :key="$route.fullPath" />-->
    <el-drawer :visible.sync="openDrawer">
      <chat :movieName="this.movie.movieName" :sendRatingQualification="getRatingQualification"></chat>
    </el-drawer>
  </div>
</template>

<script>
import FontHeader from "@/components/FontHeader";
import ComTest from "@/components/ComTest";
import chat from "@/components/chat";
import ColorThief from "colorthief"
// import ColorThief from "@/assets/js/color-thief"
import introJs from "intro.js";
export default {

  inject: ['reload'],
  components: { FontHeader, ComTest, chat },
  name: "Detail",
  mounted() {
    let id = this.$route.query.movieId
  },
  data() {
    return {
      movies: {},
      movieId: this.$route.query.movieId,
      movie: {},
      size: 10,
      similarSize: 10,
      isCollection: 0,
      comments: {},//评论信息
      movieRating: 0,//电影评分,
      ratingObject: {},
      actors: {},//电影对应的演员
      color: [40, 47, 55],
      openDrawer: false,
    }
  },
  created() {
    // this.newUserIntro()
    this.showBackground()
    this.getSimilarMovies()
    this.getCurMovies()
    this.isCollect()
    this.selectMovieRating()
    this.getMovieActor()
  },
  methods: {
    getRatingQualification(message) {
      if (message == 1) {
        // this.$confirm('恭喜您已获得评分资格', '提示', {
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   type: 'warning'
        // }).then(() => {
        //   this.openDrawer = false
        // });
        this.$message.success('恭喜您已获得评分资格');
        this.openDrawer = false
        return
      }
      // this.$confirm('抱歉由于问题回答错误，您仍未获得评分标准', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      //   this.openDrawer = false
      // });
      this.$message('抱歉由于问题回答错误，您仍未获得评分资格');
      this.openDrawer = false
      return
    },
    newUserIntro() {
      new introJs().start();
      // if (localStorage.getItem("userRatingNum")==0){
      //     console.log(localStorage.getItem("userRatingNum"))
      //     new introJs().start();
      // }
    },
    showBackground() {
      this.movieId = this.$route.query.movieId;
      const image = new Image();
      image.crossOrigin = ''
      image.src = "http://43.138.158.143/poster_background/" + this.movieId + ".jpg";
      image.onload = () => {
        const colorThief = new ColorThief();
        const color = colorThief.getColor(image);
        this.color = color;
        document.getElementById("movieBackground").style.background = 'linear-gradient(to right, rgba(' + color[0] + "," + color[1] + "," + color[2] + ", 1) calc((50vw - 170px) - 340px), rgba(" + color[0] + "," + color[1] + "," + color[2] + ", 0.84) 50%, rgba(" + color[0] + "," + color[1] + "," + color[2] + ", 0.84) 100%";
      };
    },
    getSimilarMovies() {
      this.request.get("/movie/visitor/getSimilarMovie", {
        params: {
          movieId: this.movieId,
          size: this.size,
        }
      }).then(res => {
        if (res.code == 0) {
          this.movies = res.data
        } else {
        }
      })
    },
    getCurMovies() {
      this.request.get('/movie/mayBeVisitor/getMovieById', {
        params: {
          movieId: this.$route.query.movieId
        }
      }).then(res => {
        if (res.code == 0) {
          this.movie = res.data
        } else {
          this.$message.error(res.message)
        }
      })
    },
    splitGenres() {
      if (this.movie.movieGenres !== undefined) {
        return this.movie.movieGenres.split('|')
      }
    },
    onCollection() {
      this.movieId = this.$route.query.movieId
      this.request.post("/movie/collectMovie", this.movieId).then(res => {
        if (res.code == 0) {
          this.isCollection = !this.isCollection
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
      })
    },
    isCollect() {
      if (localStorage.getItem("Token") != null) {
        this.request.get("/movie/isCollectMovie", {
          params: {
            movieId: this.$route.query.movieId
          }
        }).then(res => {
          if (res.data == 1) {
            this.isCollection = 1
          } else {
            this.isCollection = 0
          }
        })
      }
    },
    rating() {
      this.movieId = this.$route.query.movieId
      this.ratingObject.movieId = this.movieId
      this.ratingObject.movieRating = this.movieRating
      this.request.get(`/question/getUserRatingQualification?movieId=${this.movieId}`).then(res => {
        // console.log(res.data)
        if (res.data === 0) {
          this.open()
          // this.openDrawer = true
          this.movieRating = 0
        }
        else {
          this.request.post("/movie/ratingMovie", this.ratingObject).then(res => {
            if (res.code == 0) {
              this.$message.success(res.message)
            } else {
              this.$message.error(res.message)
            }
          })
          this.openDrawer = false
        }
      })
      // console.log(this.movieRating)
    },
    open() {
      this.$confirm('您目前没有评分资格，暂时无法评分。可以通过回答该电影相关的题目来获取评分资格。是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.openDrawer = true
      })
    },
    selectMovieRating() {
      if (localStorage.getItem("Token") !== null) {
        this.movieId = this.$route.query.movieId
        this.request.get("/movie/selectMovieRating", {
          params: {
            "movieId": this.movieId
          }
        }).then(res => {
          if (res.code == 0) {
            this.movieRating = res.data
          } else {
            this.$message.error(res.message)
          }
        })
      }
    },
    getMovieActor() {
      this.request.get("/actor/visitor/selectMovieActor", {
        params: {
          movieId: this.$route.query.movieId,
        }
      }).then(res => {
        if (res.code == 0) {
          this.actors = res.data
        } else {
          this.$message.error(res.message)
        }
      })
    },
    searchGenre(genre) {
      this.$router.push({
        name: 'MovieList',
        query: {
          page: 1,
          pageSize: 5,
          searchType: 1,
          info: genre
        }
      })
    },

  },
  //监听地址的变化
  watch: {
    $route() {
      if (this.$route.query) {
        this.movieId = this.$route.query.movieId
        this.size = 10
        window.scrollTo(0, 0)
        this.showBackground()
        this.getSimilarMovies()
        this.getCurMovies()
        this.getMovieActor()
        this.selectMovieRating()
      }
    }
  }
}
</script>

<style scoped></style>